<template>
  <a-drawer 
    v-model:visible="vdata.visible" 
    :title="'营销程序管理'"
    :mask-closable="false"
    :body-style="{ paddingBottom: '80px' }" 
    width="40%"
    class="drawer-width" 
    @close="onClose"
  >
    <a-form
      ref="formRef"
      :model="vdata.saveObject"
      layout="horizontal"
      labelAlign="left"
      autocomplete="off"
      :hideRequiredMark="true"
      :colon="false"
      :label-col="{ span: 3 }"
      :wrapper-col="{ span: 20 }"
      :rules="vdata.rules"
    >
      <a-form-item label="程序类型" name="type" :wrapper-col="{ span: 9 }">
        <a-input v-model:value="vdata.saveObject['type']" placeholder="程序类型" />
      </a-form-item>
      <a-form-item label="appid" name="appid" :wrapper-col="{ span: 9 }">
        <a-input v-model:value="vdata.saveObject['appid']" placeholder="appid" />
      </a-form-item>
      <a-form-item label="appsecret" name="appsecret" :wrapper-col="{ span: 9 }">
        <a-input v-model:value="vdata.saveObject['appsecret']" placeholder="appsecret" />
      </a-form-item>
    </a-form>
    <div class="drawer-btn-center">
      <a-button :style="{ marginRight: '8px' }" style="margin-right:8px" @click="onClose">
        <close-outlined />
        取消
      </a-button>
      <a-button type="primary" :loading="vdata.btnLoading" @click="handleOkFunc">
        <check-outlined />
        保存
      </a-button>
    </div>
  </a-drawer>
</template>


<script lang="ts" setup>
import { ref, reactive, defineExpose } from 'vue'


const formRef = ref()

const vdata:any = reactive({
  visible: false,
  btnLoading: false,
  saveObject: {},
  rules: {

  }
})

function handleOkFunc(){
  vdata.btnLoading = true
  console.log(vdata.saveObject)
}

function show(){
  vdata.visible = true
}

function onClose(){
  vdata.visible = false
}

defineExpose({
  show
})
</script>
